<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{$pagetitle}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/admin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/admin/style/admin.css" media="all">
</head>
<body>

	<div class="layui-fluid">
	<div class="layui-card">

	<div class="layui-form layui-card-header layuiadmin-card-header-auto">
	<div class="layui-form-item">


	  <div class="layui-inline">
		  <button class="layui-btn" lay-demo="selectAll">全选</button>
		  <button class="layui-btn layui-btn-normal" lay-demo="unSelectAll">默认选择</button>
		  <button class="layui-btn layui-btn-warm" lay-demo="openAll2">展开所有二级结点</button>
		  <button class="layui-btn layui-btn-warm" lay-demo="openAll">展开所有结点</button>
		  <button class="layui-btn layui-btn-danger" lay-demo="closeAll">收起所有结点</button>
	  </div>          
	</div>
	</div>

	<div class="layui-card-body">
	<form class="layui-form" method="post" action="{:url()}" onsubmit="return save_form(this)" lay-filter="component-form-element">
		<input type="hidden" name="role_id" value="{$role_id}">
		<div id="test-tree-demo1"></div>
		<div class="layui-form-item layui-layout-admin" style="margin-top: 30px;">
			<div class="layui-input-block">
			   <div class="layui-footer" style="left: 0;">
				  <button class="layui-btn" lay-submit="" type="submit" lay-filter="component-form-element">立即提交</button>
				  <button type="reset" class="layui-btn layui-btn-primary cancel">返回</button>
			  </div>
			</div>
		</div>
	</form>				  
	</div>
      
	</div>
</div>

  <script src="/static/admin/layui/layui.all.js"></script>
  <script src="/static/js/jquery.min.js"></script>    
  <script src="/static/js/globals.js"></script>  
  <script>
  layui.config({
    base: '/static/admin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'tree', 'util'], function(){
    var tree = layui.tree
    ,layer = layui.layer
    ,util = layui.util
	,data = {:json_encode($data)};
	
    //基本演示
    tree.render({
      elem: '#test-tree-demo1'
	  ,field:'name[]'
      ,data: data
      ,showCheckbox: true  //是否显示复选框
      ,id: 'test-tree-demoId1'
    });
    //按钮事件
    util.event('lay-demo', {
      getChecked: function(othis){
        var checkedData = tree.getChecked('test-tree-demoId1'); //获取选中节点的数据
        
        layer.alert(JSON.stringify(checkedData), {shade:0});
        console.log(checkedData);
      },
	  //全选
      selectAll: function(){
		allSelect(data)
		tree.reload('test-tree-demoId1', {
			data: data
		});
      },
	  //全不选
	  unSelectAll: function(){
		data=allUnSelect(data);
		tree.reload('test-tree-demoId1', {
			data: data
		});
      },
	  //展开所有结点
	  openAll:function(){
        data=openAll(data,true);
		tree.reload('test-tree-demoId1', {
			data: data
		});
	  },
	  //展开所有2级结点
	  openAll2:function(){
        $.each(data, function (index, item) {
            data[index].spread = true;	
        })
		tree.reload('test-tree-demoId1', {
			data: data
		});
	  },	  
	  //关闭所有结点
	  closeAll:function(){
        data=openAll(data,false);
		tree.reload('test-tree-demoId1', {
			data: data
		});
	  }	  

    });

  });
  

    // 全选
    function allSelect(database) {
        $.each(database, function (index, item) {
            item.checked = true;
            if (item.children.length) {
                $.each(item.children, function (index2, item2) {
                    if (!item2.checked) {
                        item2.checked = true;
                    }
                })
            }
 
        })
	}

    //全不选
    function allUnSelect(database) {
        $.each(database, function (index, item) {
            item.checked = false;
            if (item.children.length) {
                $.each(item.children, function (index2, item2) {
                    if (item2.checked) {
                        item2.checked = false;
                    }
                })
            }
        })
		return database;
    }
	//展开所有
	function openAll(data,type){
        $.each(data, function (index, item) {
            data[index].spread = type;	
            if (item.children) {
				openAll(item.children,type);
            }
        })
		return data;
	}
	function success_fun(){
		
	}
  </script>

</body>
</html>
